<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客主页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_list.css">

	<script src="js/jquery.min.js"></script>
	<script src="js/logout.js"></script>
	<script src="js/urlutils.js"></script>

    <style>
        /* 新增的样式 */
        .product-tab {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            margin-bottom: 20px;
            padding: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .product-tab:hover {
            background-color: #f0f0f0;
        }

        .product-tab img {
            width: 150px;
            height: 150px;
            margin-right: 10px;
            float: left;
        }

        .product-tab .product-info {
            margin-left: 20px;
            overflow: hidden;
        }

        .product-tab .product-info h3 {
            margin-top: 0;
        }

        .product-tab .product-info p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="nav">
        <div class="flag">
            <img src="image/pen.svg" alt="logo">
            <div class="title">宝克书写笔销售系统</div>
        </div>

        <div class="page">
            <a href="seller_list.html">商品列表</a>
			<a href="shopping_cart.html">购物车</a>
            <a href="order_list.html">订单管理</a>
            <a href="user_info.html">个人中心</a>
            <a href="javascript:logout()">注销</a>
        </div>
    </div>
    
    <div class="containerX">
		<div class="rightX">
            <!-- 商品列表区域 -->
            <div id="product_list">
<!--                &lt;!&ndash; 商品1 &ndash;&gt;-->
<!--                <div class="product-tab" onclick="gotoProductDetails(1)">-->
<!--                    <img src="image/baoke1.jpg" alt="Product 1">-->
<!--                    <div class="product-info">-->
<!--                        <h3>商品A</h3>-->
<!--                        <p>价格：$100</p>-->
<!--                        <p>销量：10</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; 商品2 &ndash;&gt;-->
<!--                <div class="product-tab" onclick="gotoProductDetails(2)">-->
<!--                    <img src="image/baoke2.jpg" alt="Product 2">-->
<!--                    <div class="product-info">-->
<!--                        <h3>商品名称2</h3>-->
<!--                        <p>价格：$150</p>-->
<!--                        <p>描述：这是商品2的描述。</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash; 商品3 &ndash;&gt;-->
<!--                <div class="product-tab" onclick="gotoProductDetails(3)">-->
<!--                    <img src="image/baoke3.jpg" alt="Product 3">-->
<!--                    <div class="product-info">-->
<!--                        <h3>商品名称3</h3>-->
<!--                        <p>价格：$200</p>-->
<!--                        <p>描述：这是商品3的描述。</p>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
                <!-- 在此添加更多商品 -->
			<hr>
			<div class="blog-pagnation-wrapper">
				<button class="blog-pagnation-item" onclick="tofirst()">首页</button> 
				<button class="blog-pagnation-item" onclick="tobefore()">上一页</button>
				<span id="pindex">1</span>/<span id="pcount">1</span>
				<button class="blog-pagnation-item" onclick="tonext()">下一页</button>
				<button class="blog-pagnation-item" onclick="tolast()">末页</button>
			</div>
        </div>
    </div>
	<script>
	        // 初始化页面
	        var pSize = 4; // 每页显示条数
	        var pIndex = 1 // 页码
	        var pageCount = 1 // 总页数
	        function init() {
	            // 1.处理分页参数
	            pIndex = getParamValue("pIndex");
	            if (pIndex == null) {
	                pIndex = 1;
	            }
	            pSize = getParamValue("pSize");
	            if (pSize == null) {
	                pSize = 4;
	            }
	            jQuery("#pindex").html(pIndex);
	            // 2.向后端请求数据
	            jQuery.ajax({
	                url:"/product/getProductsByPage",
	                type:"GET",
	                data:{
	                    "pIndex":pIndex,
	                    "pSize":pSize
	                },
	                // 3.将结果返回给用户
	                success:function(res){
	                    if (res.code == 200 && res.data != null) {
	                        // 获取数据成功
	                        var createHtml = "";
	                        if (res.data.list!= null || res.data.list.length > 0) {
	                            // 文章列表不为空
	                            pageCount = res.data.pages;
	                            jQuery("#pcount").html(pageCount);
	                            var list = res.data.list;
	                            for(var i=0;i<list.length;i++){
	                                var art = list[i]; // 文章对象
	                                createHtml += '<div class="product-tab" onclick="gotoProductDetails(';
                                    createHtml += art.id + ')">';
	                                createHtml += '<img src="'+art.imageUrl+'">';
	                                createHtml += '<div class="product-info">';
	                                createHtml += '<h3>'+art.productName+'</h3>';
	                                createHtml += '<p>价格：'+ art.price+'</p>';
	                                createHtml += '<p>销量：'+ art.soldQuantity+'</p>';
                                    createHtml += '</div>';
	                                createHtml += '</div>';
	                            }
	                        } else {
	                            // 文章列表为空
	                            createHtml += "<h3 style='text-align: center; margin-top:10px'>暂无商品</h3>";
	                        }
	                        jQuery("#product_list").html(createHtml);
	                    } else {
	                        alert("查询失败:"+res.meg);
	                    }
	                }
	            });
	
	        }
	        init();
	
	        // 点击首页
	        function tofirst(){
	            // 1.判断是否在首页
	            if (pIndex == 1) {
	                // 无需跳转，已经在首页了
	                return false;
	            }
	            // 2.跳转到首页
	            location.href = "seller_list.html";
	        }
	        // 点击末页
	        function tolast(){
	            // 1.判断是否在末页
	            if (pIndex == pageCount) {
	                // 无需跳转，已经在末页了
	                return false;
	            }
	            // 2.跳转到末页
	            location.href = "seller_list.html?pIndex="+pageCount;
	        }
	        // 点击下一页
	        function tonext(){
	            // 1.判断是否在末页
	            if (pIndex == pageCount) {
	                // 无需跳转，isDeleted已经在末页了
	                return false;
	            }
	            // 2.跳转到下一页
	            location.href = "seller_list.html?pIndex="+(parseInt(pIndex)+1);
	        }
	        // 点击上一页
	        function tobefore(){
	            // 1.判断是否在首页
	            if (pIndex == 1) {
	                // 无需跳转，已经在末页了
	                return false;
	            }
	            // 2.跳转到上一页
	            location.href = "seller_list.html?pIndex="+(parseInt(pIndex)-1);
	        }

            // 详情跳转
            function gotoProductDetails(id) {
                location.href = "seller_detail.html?id="+id;
            }
	
	    </script>
</body>
</html>